home *** CD-ROM | disk | FTP | other *** search
/ PC World 2008 September / PCWorld_2008-09_cd.bin / temacd / xnview / XnView-beta1.exe / XnView / WebTemplate / Visuddhi - Lightbox [green] / js / lightbox.js < prev    next >
Text File  |  2006-04-09  |  21KB  |  689 lines
  1. // -----------------------------------------------------------------------------------
  2. //
  3. //    Lightbox v2.02
  4. //    by Lokesh Dhakar - http://www.huddletogether.com
  5. //    3/31/06
  6. //
  7. //    For more information on this script, visit:
  8. //    http://huddletogether.com/projects/lightbox2/
  9. //
  10. //    Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  11. //    
  12. //    Credit also due to those who have helped, inspired, and made their code available to the public.
  13. //    Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
  14. //
  15. //
  16. // -----------------------------------------------------------------------------------
  17. /*
  18.  
  19.     Table of Contents
  20.     -----------------
  21.     Configuration
  22.     Global Variables
  23.  
  24.     Extending Built-in Objects    
  25.     - Object.extend(Element)
  26.     - Array.prototype.removeDuplicates()
  27.     - Array.prototype.empty()
  28.  
  29.     Lightbox Class Declaration
  30.     - initialize()
  31.     - start()
  32.     - changeImage()
  33.     - resizeImageContainer()
  34.     - showImage()
  35.     - updateDetails()
  36.     - updateNav()
  37.     - enableKeyboardNav()
  38.     - disableKeyboardNav()
  39.     - keyboardAction()
  40.     - preloadNeighborImages()
  41.     - end()
  42.     
  43.     Miscellaneous Functions
  44.     - getPageScroll()
  45.     - getPageSize()
  46.     - getKey()
  47.     - listenKey()
  48.     - showSelectBoxes()
  49.     - hideSelectBoxes()
  50.     - pause()
  51.     - initLightbox()
  52.     
  53.     Function Calls
  54.     - addLoadEvent(initLightbox)
  55.     
  56. */
  57. // -----------------------------------------------------------------------------------
  58.  
  59. //
  60. //    Configuration
  61. //
  62. var fileLoadingImage = "images/loading.gif";        
  63. var fileBottomNavCloseImage = "images/closelabel.gif";
  64.  
  65. var resizeSpeed = 7;    // controls the speed of the image resizing (1=slowest and 10=fastest)
  66.  
  67. var borderSize = 10;    //if you adjust the padding in the CSS, you will need to update this variable
  68.  
  69. // -----------------------------------------------------------------------------------
  70.  
  71. //
  72. //    Global Variables
  73. //
  74. var imageArray = new Array;
  75. var activeImage;
  76.  
  77. if(resizeSpeed > 10){ resizeSpeed = 10;}
  78. if(resizeSpeed < 1){ resizeSpeed = 1;}
  79. resizeDuration = (11 - resizeSpeed) * 0.15;
  80.  
  81. // -----------------------------------------------------------------------------------
  82.  
  83. //
  84. //    Additional methods for Element added by SU, Couloir
  85. //    - further additions by Lokesh Dhakar (huddletogether.com)
  86. //
  87. Object.extend(Element, {
  88.     getWidth: function(element) {
  89.            element = $(element);
  90.            return element.offsetWidth; 
  91.     },
  92.     setWidth: function(element,w) {
  93.            element = $(element);
  94.         element.style.width = w +"px";
  95.     },
  96.     setHeight: function(element,h) {
  97.            element = $(element);
  98.         element.style.height = h +"px";
  99.     },
  100.     setTop: function(element,t) {
  101.            element = $(element);
  102.         element.style.top = t +"px";
  103.     },
  104.     setSrc: function(element,src) {
  105.         element = $(element);
  106.         element.src = src; 
  107.     },
  108.     setHref: function(element,href) {
  109.         element = $(element);
  110.         element.href = href; 
  111.     },
  112.     setInnerHTML: function(element,content) {
  113.         element = $(element);
  114.         element.innerHTML = content;
  115.     }
  116. });
  117.  
  118. // -----------------------------------------------------------------------------------
  119.  
  120. //
  121. //    Extending built-in Array object
  122. //    - array.removeDuplicates()
  123. //    - array.empty()
  124. //
  125. Array.prototype.removeDuplicates = function () {
  126.     for(i = 1; i < this.length; i++){
  127.         if(this[i][0] == this[i-1][0]){
  128.             this.splice(i,1);
  129.         }
  130.     }
  131. }
  132.  
  133. // -----------------------------------------------------------------------------------
  134.  
  135. Array.prototype.empty = function () {
  136.     for(i = 0; i <= this.length; i++){
  137.         this.shift();
  138.     }
  139. }
  140.  
  141. // -----------------------------------------------------------------------------------
  142.  
  143. //
  144. //    Lightbox Class Declaration
  145. //    - initialize()
  146. //    - start()
  147. //    - changeImage()
  148. //    - resizeImageContainer()
  149. //    - showImage()
  150. //    - updateDetails()
  151. //    - updateNav()
  152. //    - enableKeyboardNav()
  153. //    - disableKeyboardNav()
  154. //    - keyboardNavAction()
  155. //    - preloadNeighborImages()
  156. //    - end()
  157. //
  158. //    Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
  159. //
  160. var Lightbox = Class.create();
  161.  
  162. Lightbox.prototype = {
  163.     
  164.     // initialize()
  165.     // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
  166.     // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
  167.     // the function inserts html at the bottom of the page which is used to display the shadow 
  168.     // overlay and the image container.
  169.     //
  170.     initialize: function() {    
  171.         if (!document.getElementsByTagName){ return; }
  172.         var anchors = document.getElementsByTagName('a');
  173.  
  174.         // loop through all anchor tags
  175.         for (var i=0; i<anchors.length; i++){
  176.             var anchor = anchors[i];
  177.             
  178.             var relAttribute = String(anchor.getAttribute('rel'));
  179.             
  180.             // use the string.match() method to catch 'lightbox' references in the rel attribute
  181.             if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
  182.                 anchor.onclick = function () {myLightbox.start(this); return false;}
  183.             }
  184.         }
  185.  
  186.         // The rest of this code inserts html at the bottom of the page that looks similar to this:
  187.         //
  188.         //    <div id="overlay"></div>
  189.         //    <div id="lightbox">
  190.         //        <div id="outerImageContainer">
  191.         //            <div id="imageContainer">
  192.         //                <img id="lightboxImage">
  193.         //                <div style="" id="hoverNav">
  194.         //                    <a href="#" id="prevLink"></a>
  195.         //                    <a href="#" id="nextLink"></a>
  196.         //                </div>
  197.         //                <div id="loading">
  198.         //                    <a href="#" id="loadingLink">
  199.         //                        <img src="images/loading.gif">
  200.         //                    </a>
  201.         //                </div>
  202.         //            </div>
  203.         //        </div>
  204.         //        <div id="imageDataContainer">
  205.         //            <div id="imageData">
  206.         //                <div id="imageDetails">
  207.         //                    <span id="caption"></span>
  208.         //                    <span id="numberDisplay"></span>
  209.         //                </div>
  210.         //                <div id="bottomNav">
  211.         //                    <a href="#" id="bottomNavClose">
  212.         //                        <img src="images/close.gif">
  213.         //                    </a>
  214.         //                </div>
  215.         //            </div>
  216.         //        </div>
  217.         //    </div>
  218.  
  219.  
  220.         var objBody = document.getElementsByTagName("body").item(0);
  221.         
  222.         var objOverlay = document.createElement("div");
  223.         objOverlay.setAttribute('id','overlay');
  224.         objOverlay.style.display = 'none';
  225.         objOverlay.onclick = function() { myLightbox.end(); return false; }
  226.         objBody.appendChild(objOverlay);
  227.         
  228.         var objLightbox = document.createElement("div");
  229.         objLightbox.setAttribute('id','lightbox');
  230.         objLightbox.style.display = 'none';
  231.         objBody.appendChild(objLightbox);
  232.     
  233.         var objOuterImageContainer = document.createElement("div");
  234.         objOuterImageContainer.setAttribute('id','outerImageContainer');
  235.         objLightbox.appendChild(objOuterImageContainer);
  236.  
  237.         var objImageContainer = document.createElement("div");
  238.         objImageContainer.setAttribute('id','imageContainer');
  239.         objOuterImageContainer.appendChild(objImageContainer);
  240.     
  241.         var objLightboxImage = document.createElement("img");
  242.         objLightboxImage.setAttribute('id','lightboxImage');
  243.         objImageContainer.appendChild(objLightboxImage);
  244.     
  245.         var objHoverNav = document.createElement("div");
  246.         objHoverNav.setAttribute('id','hoverNav');
  247.         objImageContainer.appendChild(objHoverNav);
  248.     
  249.         var objPrevLink = document.createElement("a");
  250.         objPrevLink.setAttribute('id','prevLink');
  251.         objPrevLink.setAttribute('href','#');
  252.         objHoverNav.appendChild(objPrevLink);
  253.         
  254.         var objNextLink = document.createElement("a");
  255.         objNextLink.setAttribute('id','nextLink');
  256.         objNextLink.setAttribute('href','#');
  257.         objHoverNav.appendChild(objNextLink);
  258.     
  259.         var objLoading = document.createElement("div");
  260.         objLoading.setAttribute('id','loading');
  261.         objImageContainer.appendChild(objLoading);
  262.     
  263.         var objLoadingLink = document.createElement("a");
  264.         objLoadingLink.setAttribute('id','loadingLink');
  265.         objLoadingLink.setAttribute('href','#');
  266.         objLoadingLink.onclick = function() { myLightbox.end(); return false; }
  267.         objLoading.appendChild(objLoadingLink);
  268.     
  269.         var objLoadingImage = document.createElement("img");
  270.         objLoadingImage.setAttribute('src', fileLoadingImage);
  271.         objLoadingLink.appendChild(objLoadingImage);
  272.  
  273.         var objImageDataContainer = document.createElement("div");
  274.         objImageDataContainer.setAttribute('id','imageDataContainer');
  275.         objImageDataContainer.className = 'clearfix';
  276.         objLightbox.appendChild(objImageDataContainer);
  277.  
  278.         var objImageData = document.createElement("div");
  279.         objImageData.setAttribute('id','imageData');
  280.         objImageDataContainer.appendChild(objImageData);
  281.     
  282.         var objImageDetails = document.createElement("div");
  283.         objImageDetails.setAttribute('id','imageDetails');
  284.         objImageData.appendChild(objImageDetails);
  285.     
  286.         var objCaption = document.createElement("span");
  287.         objCaption.setAttribute('id','caption');
  288.         objImageDetails.appendChild(objCaption);
  289.     
  290.         var objNumberDisplay = document.createElement("span");
  291.         objNumberDisplay.setAttribute('id','numberDisplay');
  292.         objImageDetails.appendChild(objNumberDisplay);
  293.         
  294.         var objBottomNav = document.createElement("div");
  295.         objBottomNav.setAttribute('id','bottomNav');
  296.         objImageData.appendChild(objBottomNav);
  297.     
  298.         var objBottomNavCloseLink = document.createElement("a");
  299.         objBottomNavCloseLink.setAttribute('id','bottomNavClose');
  300.         objBottomNavCloseLink.setAttribute('href','#');
  301.         objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
  302.         objBottomNav.appendChild(objBottomNavCloseLink);
  303.     
  304.         var objBottomNavCloseImage = document.createElement("img");
  305.         objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
  306.         objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
  307.     },
  308.     
  309.     //
  310.     //    start()
  311.     //    Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
  312.     //
  313.     start: function(imageLink) {    
  314.  
  315.         hideSelectBoxes();
  316.  
  317.         // stretch overlay to fill page and fade in
  318.         var arrayPageSize = getPageSize();
  319.         Element.setHeight('overlay', arrayPageSize[1]);
  320.         new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
  321.  
  322.         imageArray = [];
  323.         imageNum = 0;        
  324.  
  325.         if (!document.getElementsByTagName){ return; }
  326.         var anchors = document.getElementsByTagName('a');
  327.  
  328.         // if image is NOT part of a set..
  329.         if((imageLink.getAttribute('rel') == 'lightbox')){
  330.             // add single image to imageArray
  331.             imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));            
  332.         } else {
  333.         // if image is part of a set..
  334.  
  335.             // loop through anchors, find other images in set, and add them to imageArray
  336.             for (var i=0; i<anchors.length; i++){
  337.                 var anchor = anchors[i];
  338.                 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
  339.                     imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
  340.                 }
  341.             }
  342.             imageArray.removeDuplicates();
  343.             while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
  344.         }
  345.  
  346.         // calculate top offset for the lightbox and display 
  347.         var arrayPageSize = getPageSize();
  348.         var arrayPageScroll = getPageScroll();
  349.         var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
  350.  
  351.         Element.setTop('lightbox', lightboxTop);
  352.         Element.show('lightbox');
  353.         
  354.         this.changeImage(imageNum);
  355.     },
  356.  
  357.     //
  358.     //    changeImage()
  359.     //    Hide most elements and preload image in preparation for resizing image container.
  360.     //
  361.     changeImage: function(imageNum) {    
  362.         
  363.         activeImage = imageNum;    // update global var
  364.  
  365.         // hide elements during transition
  366.         Element.show('loading');
  367.         Element.hide('lightboxImage');
  368.         Element.hide('hoverNav');
  369.         Element.hide('prevLink');
  370.         Element.hide('nextLink');
  371.         Element.hide('imageDataContainer');
  372.         Element.hide('numberDisplay');        
  373.         
  374.         imgPreloader = new Image();
  375.         
  376.         // once image is preloaded, resize image container
  377.         imgPreloader.onload=function(){
  378.             Element.setSrc('lightboxImage', imageArray[activeImage][0]);
  379.             myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
  380.         }
  381.         imgPreloader.src = imageArray[activeImage][0];
  382.     },
  383.  
  384.     //
  385.     //    resizeImageContainer()
  386.     //
  387.     resizeImageContainer: function( imgWidth, imgHeight) {
  388.  
  389.         // get current height and width
  390.         this.wCur = Element.getWidth('outerImageContainer');
  391.         this.hCur = Element.getHeight('outerImageContainer');
  392.  
  393.         // scalars based on change from old to new
  394.         this.xScale = ((imgWidth  + (borderSize * 2)) / this.wCur) * 100;
  395.         this.yScale = ((imgHeight  + (borderSize * 2)) / this.hCur) * 100;
  396.  
  397.         // calculate size difference between new and old image, and resize if necessary
  398.         wDiff = (this.wCur - borderSize * 2) - imgWidth;
  399.         hDiff = (this.hCur - borderSize * 2) - imgHeight;
  400.  
  401.         if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
  402.         if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
  403.  
  404.         // if new and old image are same size and no scaling transition is necessary, 
  405.         // do a quick pause to prevent image flicker.
  406.         if((hDiff == 0) && (wDiff == 0)){
  407.             if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
  408.         }
  409.  
  410.         Element.setHeight('prevLink', imgHeight);
  411.         Element.setHeight('nextLink', imgHeight);
  412.         Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
  413.  
  414.         this.showImage();
  415.     },
  416.     
  417.     //
  418.     //    showImage()
  419.     //    Display image and begin preloading neighbors.
  420.     //
  421.     showImage: function(){
  422.         Element.hide('loading');
  423.         new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){    myLightbox.updateDetails(); } });
  424.         this.preloadNeighborImages();
  425.     },
  426.  
  427.     //
  428.     //    updateDetails()
  429.     //    Display caption, image number, and bottom nav.
  430.     //
  431.     updateDetails: function() {
  432.     
  433.         Element.show('caption');
  434.         Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
  435.         
  436.         // if image is part of set display 'Image x of x' 
  437.         if(imageArray.length > 1){
  438.             Element.show('numberDisplay');
  439.             Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
  440.         }
  441.  
  442.         new Effect.Parallel(
  443.             [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
  444.               new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 
  445.             { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 
  446.         );
  447.     },
  448.  
  449.     //
  450.     //    updateNav()
  451.     //    Display appropriate previous and next hover navigation.
  452.     //
  453.     updateNav: function() {
  454.  
  455.         Element.show('hoverNav');                
  456.  
  457.         // if not first image in set, display prev image button
  458.         if(activeImage != 0){
  459.             Element.show('prevLink');
  460.             document.getElementById('prevLink').onclick = function() {
  461.                 myLightbox.changeImage(activeImage - 1); return false;
  462.             }
  463.         }
  464.  
  465.         // if not last image in set, display next image button
  466.         if(activeImage != (imageArray.length - 1)){
  467.             Element.show('nextLink');
  468.             document.getElementById('nextLink').onclick = function() {
  469.                 myLightbox.changeImage(activeImage + 1); return false;
  470.             }
  471.         }
  472.         
  473.         this.enableKeyboardNav();
  474.     },
  475.  
  476.     //
  477.     //    enableKeyboardNav()
  478.     //
  479.     enableKeyboardNav: function() {
  480.         document.onkeydown = this.keyboardAction; 
  481.     },
  482.  
  483.     //
  484.     //    disableKeyboardNav()
  485.     //
  486.     disableKeyboardNav: function() {
  487.         document.onkeydown = '';
  488.     },
  489.  
  490.     //
  491.     //    keyboardAction()
  492.     //
  493.     keyboardAction: function(e) {
  494.         if (e == null) { // ie
  495.             keycode = event.keyCode;
  496.         } else { // mozilla
  497.             keycode = e.which;
  498.         }
  499.  
  500.         key = String.fromCharCode(keycode).toLowerCase();
  501.         
  502.         if((key == 'x') || (key == 'o') || (key == 'c')){    // close lightbox
  503.             myLightbox.end();
  504.         } else if(key == 'p'){    // display previous image
  505.             if(activeImage != 0){
  506.                 myLightbox.disableKeyboardNav();
  507.                 myLightbox.changeImage(activeImage - 1);
  508.             }
  509.         } else if(key == 'n'){    // display next image
  510.             if(activeImage != (imageArray.length - 1)){
  511.                 myLightbox.disableKeyboardNav();
  512.                 myLightbox.changeImage(activeImage + 1);
  513.             }
  514.         }
  515.  
  516.  
  517.     },
  518.  
  519.     //
  520.     //    preloadNeighborImages()
  521.     //    Preload previous and next images.
  522.     //
  523.     preloadNeighborImages: function(){
  524.  
  525.         if((imageArray.length - 1) > activeImage){
  526.             preloadNextImage = new Image();
  527.             preloadNextImage.src = imageArray[activeImage + 1][0];
  528.         }
  529.         if(activeImage > 0){
  530.             preloadPrevImage = new Image();
  531.             preloadPrevImage.src = imageArray[activeImage - 1][0];
  532.         }
  533.     
  534.     },
  535.  
  536.     //
  537.     //    end()
  538.     //
  539.     end: function() {
  540.         this.disableKeyboardNav();
  541.         Element.hide('lightbox');
  542.         new Effect.Fade('overlay', { duration: 0.2});
  543.         showSelectBoxes();
  544.     }
  545. }
  546.  
  547. // -----------------------------------------------------------------------------------
  548.  
  549. //
  550. // getPageScroll()
  551. // Returns array with x,y page scroll values.
  552. // Core code from - quirksmode.org
  553. //
  554. function getPageScroll(){
  555.  
  556.     var yScroll;
  557.  
  558.     if (self.pageYOffset) {
  559.         yScroll = self.pageYOffset;
  560.     } else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict
  561.         yScroll = document.documentElement.scrollTop;
  562.     } else if (document.body) {// all other Explorers
  563.         yScroll = document.body.scrollTop;
  564.     }
  565.  
  566.     arrayPageScroll = new Array('',yScroll) 
  567.     return arrayPageScroll;
  568. }
  569.  
  570. // -----------------------------------------------------------------------------------
  571.  
  572. //
  573. // getPageSize()
  574. // Returns array with page width, height and window width, height
  575. // Core code from - quirksmode.org
  576. // Edit for Firefox by pHaez
  577. //
  578. function getPageSize(){
  579.     
  580.     var xScroll, yScroll;
  581.     
  582.     if (window.innerHeight && window.scrollMaxY) {    
  583.         xScroll = document.body.scrollWidth;
  584.         yScroll = window.innerHeight + window.scrollMaxY;
  585.     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  586.         xScroll = document.body.scrollWidth;
  587.         yScroll = document.body.scrollHeight;
  588.     } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  589.         xScroll = document.body.offsetWidth;
  590.         yScroll = document.body.offsetHeight;
  591.     }
  592.     
  593.     var windowWidth, windowHeight;
  594.     if (self.innerHeight) {    // all except Explorer
  595.         windowWidth = self.innerWidth;
  596.         windowHeight = self.innerHeight;
  597.     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  598.         windowWidth = document.documentElement.clientWidth;
  599.         windowHeight = document.documentElement.clientHeight;
  600.     } else if (document.body) { // other Explorers
  601.         windowWidth = document.body.clientWidth;
  602.         windowHeight = document.body.clientHeight;
  603.     }    
  604.     
  605.     // for small pages with total height less then height of the viewport
  606.     if(yScroll < windowHeight){
  607.         pageHeight = windowHeight;
  608.     } else { 
  609.         pageHeight = yScroll;
  610.     }
  611.  
  612.     // for small pages with total width less then width of the viewport
  613.     if(xScroll < windowWidth){    
  614.         pageWidth = windowWidth;
  615.     } else {
  616.         pageWidth = xScroll;
  617.     }
  618.  
  619.  
  620.     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
  621.     return arrayPageSize;
  622. }
  623.  
  624. // -----------------------------------------------------------------------------------
  625.  
  626. //
  627. // getKey(key)
  628. // Gets keycode. If 'x' is pressed then it hides the lightbox.
  629. //
  630. function getKey(e){
  631.     if (e == null) { // ie
  632.         keycode = event.keyCode;
  633.     } else { // mozilla
  634.         keycode = e.which;
  635.     }
  636.     key = String.fromCharCode(keycode).toLowerCase();
  637.     
  638.     if(key == 'x'){
  639.     }
  640. }
  641.  
  642. // -----------------------------------------------------------------------------------
  643.  
  644. //
  645. // listenKey()
  646. //
  647. function listenKey () {    document.onkeypress = getKey; }
  648.     
  649. // ---------------------------------------------------
  650.  
  651. function showSelectBoxes(){
  652.     selects = document.getElementsByTagName("select");
  653.     for (i = 0; i != selects.length; i++) {
  654.         selects[i].style.visibility = "visible";
  655.     }
  656. }
  657.  
  658. // ---------------------------------------------------
  659.  
  660. function hideSelectBoxes(){
  661.     selects = document.getElementsByTagName("select");
  662.     for (i = 0; i != selects.length; i++) {
  663.         selects[i].style.visibility = "hidden";
  664.     }
  665. }
  666.  
  667. // ---------------------------------------------------
  668.  
  669. //
  670. // pause(numberMillis)
  671. // Pauses code execution for specified time. Uses busy code, not good.
  672. // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
  673. //
  674. function pause(numberMillis) {
  675.     var now = new Date();
  676.     var exitTime = now.getTime() + numberMillis;
  677.     while (true) {
  678.         now = new Date();
  679.         if (now.getTime() > exitTime)
  680.             return;
  681.     }
  682. }
  683.  
  684. // ---------------------------------------------------
  685.  
  686.  
  687.  
  688. function initLightbox() { myLightbox = new Lightbox(); }
  689. Event.observe(window, 'load', initLightbox, false);